{% extends "site_base.html" %}

{% load i18n %}
{% load ifsetting_tag %}
{% load dajaxice_templatetags %}


{% block head_title %}{% trans "Document List" %}{% endblock %}
{% block extra_head%}
    <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
    <link href="{{ STATIC_URL }}css/jquery.dataTables.css" rel="stylesheet"></link>
    <link href="{{ STATIC_URL }}css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    <script src="{{ STATIC_URL }}js/jquery.dajax.core.js" type="text/javascript" charset="utf-8"></script>
    {% dajaxice_js_import %}
    <style type="text/css">
        tr.even.row_selected td{
            background-color: #B0BED9;
        }
        tr.odd.row_selected td{
            background-color: #B0BED9;
        }
    </style>
    <script type="text/javascript">
        var oTable;
        var cTable;
        $(document).ready(function() {
            $( "#corpora" ).hide()
            $("#corpusform").hide()
            //handle selection of multiple lines from table
            $('#table tbody tr').click( function(e) {
                if ( $(this).hasClass('row_selected') )
                    $(this).removeClass('row_selected');
                else {
                    $(this).addClass('row_selected');
                    show_corpora();};
            } );
            //handle the selction of a single row from table
            $("#cTable tbody tr").click( function( e ) {
                if ( $(this).hasClass('row_selected') ) {
                    $(this).removeClass('row_selected');
                }
                else {
                    cTable.$('tr.row_selected').removeClass('row_selected');
                    $(this).addClass('row_selected');
                }
            });
            oTable = $('#table').dataTable({
                "bJQueryUI": true,
                //"sPaginationType": "full_numbers",
                "sScrollX": "100%",
                "sScrollXInner": "110%",
                "bScrollCollapse": true,
                //"sDom": '<"top"i>rt<"bottom"flp><"clear">'
            });
            cTable = $("#cTable").dataTable({})
        } );
        function add_docs_callback(data){
            show_corpora()
        };
        function fnGetSelected( oTableLocal ) {
            var aReturn = new Array();
            var aTrs = oTableLocal.fnGetNodes();

            for ( var i=0 ; i<aTrs.length ; i++ )
            {
                if ( $(aTrs[i]).hasClass('row_selected') )
                {
                    aReturn.push( oTable._(aTrs[i]) );
                }
            }
            $('#table tbody tr').removeClass('row_selected')
            return aReturn;
        }
        function getSelectedCorpus(atable){
            var aTrs = atable.fnGetNodes();
            var keys = {{ jkeys|safe }};
            var db = {{ db|safe }};
            var coll = {{ collection|safe }}
            var corpus = [];
            for (var i=0 ; i<aTrs.length ; i++){
                if ($(aTrs[i]).hasClass('row_selected')){
                    corpus = cTable._(aTrs[i])
                    aReturn = fnGetSelected(oTable)
                    if (aReturn.length == 0){
                        alert("{% trans 'You must select at least one document to add!' %}");
                        return corpus
                    }
                    Dajaxice.taw.add_doclist_to_corpus(add_docs_callback,{'docs':aReturn,'keys':keys, 'corpus':corpus[0][0],'db':db,'coll':coll})
                }
            }
            return corpus
        }

    </script>
{% endblock %}

{% block body %}
<h2>Documents</h2>
    <table id="table" style="width: 100%">
        <thead>
        <tr>
            {% for k in keys %}
                <th>{{ k }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for doc in docs %}
        <tr>
            {% for v in doc.values %}
                <td>{{ v }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <br><br>
    {% if user.is_authenticated %}
    <div id="corpora" style="width: 70%">
        <h3>{% trans "Your Existing Corpora" %}</h3>
        <table id="cTable" style="width: 70%">
            <thead>
            <tr>
                <th>{% trans "Title" %}</th><th>{% trans "Description" %}</th>
            </tr>
            </thead>
            <tbody>
            {% for corpus in corpora %}
                <tr>
                    <td>{{ corpus.title }}</td><td>{{ corpus.description }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <br><br>
        <input name="Add" value="{% trans 'Add' %}" onclick="getSelectedCorpus(cTable)">
        <input name="Cancel" value="{% trans 'Cancel' %}" onclick="$('#corpora').hide()">
        <input name="createNewCorpus" value="{% trans 'Create New Corpus' %}" onclick="$('#corpusform').show();$('#corpora').hide();">
    </div>
    <div id="corpusform">
        <form action="/taw/createcorpus/" method="post">{% csrf_token %}
            {{ corpusform.as_p }}
            <input type="hidden" value="{{ database|safe }}" name="database"/>
            <input type="hidden" value="{{ collection|safe }}" name="collection"/>
            <input type="hidden" value=fnGetSelected(oTable) name="documents"/>
            <input type="submit" value="{% trans 'Create and Add Selected docs' %}" />
            <input type="button" value="{% trans 'Cancel' %}" onclick="$('#corpusform').hide();$('#corpora').show();"/>
        </form>
    </div>
    <script type="text/javascript">
        function show_corpora(){
            $( "#corpora" ).show()//"drop",{}, 500, callback)
            cTable.fnAdjustColumnSizing()
        }
        //callback function to bring a hidden box back
        function callback() {
          setTimeout(function() {
                $( "#corpora:visible" ).removeAttr( "style" ).fadeOut();
            }, 2000 );
        };
    </script>
    {% endif %}
{% endblock %}